<template>
    <div class="box">
        {{ message }}----{{ title }}
        <button @click="clickMe">点击</button>
    </div>
</template>
<script lang='ts' setup>
    import {defineProps,defineEmits,withDefaults} from 'vue'
    interface MyComponentType{
        message:string
        title:string
    }

    interface EmitType{
        (e:'changeToParent',val:number):void
    }
    //defineProps(['message',"title"])
    // defineProps<{message:string,title:string}>()
    withDefaults(defineProps<MyComponentType>(),{
        title:'默认标题',
        message:'默认的内容'
    })
   

    //子组件传递数据父组件写法1
    //const emit=defineEmits(['changeToParent'])
    //子组件传递数据到父组件的写法2
    const emit=defineEmits<EmitType>()
    const clickMe=()=>{
        emit('changeToParent',1000)
    }
</script>
<style lang='scss' scoped>
.box{
    width: 500px;
    height: 50px;
    border: 2px dashed #ccc;
    margin: 10px;
}
</style>